<template>
	<el-card class="" shadow="never">
		<div slot="header">
			<span class="has-text-weight-bold">🧐 随便看看</span>
		</div>
		<div>
			<p class="block ellipsis is-ellipsis-1" v-for="(item,index) in recommend" :key="index" :title="item.title">
				<router-link :to="{name:'post-detail',params: { postId: item.id }}">
					<!-- 小于 10 显示成 01 等 -->
					<span v-if="index<9" class="tag">
						0{{ parseInt(index) + 1 }}
					</span>
					<!-- 大于等于 9 显示成 10 等 -->
					<span v-else class="tag">
						{{ parseInt(index) + 1 }}
					</span>
					{{ item.title }}
				</router-link>
			</p>
		</div>
	</el-card>
</template>

<script>
import { getRecommendTopics } from '@/api/post'

export default {
  	name: 'Recommend',

	props: {
		postId: {
			type: String,
			default: null
		}
	},

	data() {
		return {
			recommend: []
		}
	},

	created() {
		this.fetchRecommendTopics()
	},

	methods: {
		fetchRecommendTopics() {
			// postId 从父组件 Details 中传入当前子组件
			getRecommendTopics(this.postId).then(value => {
				const { data } = value
				this.recommend = data
			})
		}
	}
}
</script>

<style scoped>

</style>
